webpack vue 配置
vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.json 工程文件 |-webpack.config.js webpack 配置文件 2.)基于webpack模块化开发ES6 关...
2024-01-10
webpack vue 的一些笔记
1、开发过程中使用异步组件（提高性能）当app.js（几m）太大的时候才需要异步组件 第一种： 在route.js文件中 routes:[{ path:'/nav', name:'Nav', component:()=> import('xxx/xxx/Nav')}] 第二种 xxx.vue文件中注册组件的时候异步 components:{ ...
2024-01-10
vue系列8：webpack
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；http://webpack.github.io/2、安装1）全局安装 npm i webpack -g2）项目根目录安装到项目依赖中 npm i webpack --save-dev3、使用1）npm init -y2）npm install jquery -S3）webpack .\src\main.js .\dist\bundle.jsnpm i webpack-dev-server -D 把这个工具安装到项...
2024-01-10
vue中webpack的配置
vue中webpack的配置npm init -y(生成package.json文件)实时打包：npm i webpack-dev-server创建webpack.config.js文件配置webpack.config.js文件在package.json中添加一个脚本自动将打包好的bundle.js追加到页面处理第三方文件Babel(将es6中高级的语法转换为低级语法)webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 ...
2024-01-10
vue+webpack构建项目
1、vue+webpack环境搭建步骤1.1、去官网安装node.js。下载安装包之后直接点击安装即可。测试安装成功的界面如下：1.2、利用npm安装webpack 命令行语句为 npm install webpack -g 。测试安装成功的界面如下：1.3、安装淘宝镜像1.4、接下来就是全局安装vue-cli。需要注意的是使用npm安装vue-cli的时候时间很久，...
2024-01-10
vue按需加载组件-webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,打包位置是 dist/static/js/app.[contenthash].js ( "bundle.js",//打包后输出文件的文件名))类似下面的路由代码router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 执行 webpakc 会打包为一个整体 bundle.js ,这个文...
2024-01-10
webpack处理vue中render函数内容时报错
打包组件的时候报错，提示需要别的loader来处理render函数中的内容。但是我不是很理解，我已经用了vue-loader了。。。求大神指点。。。报错内容：ERROR in ./components/lib/tag/src/tag.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./c...
2024-03-14
在webpack react项目中使用scss
create-react-app版本：1.5.21、首先安装sass-loader node-sassnpm install sass-loader node-sass —save-dev2、运行npm run eject这时候会生成配置文件3、找到config文件里的webpack.config.dev.jswebpack.config.prod.js里的css配置也要修改，修改内容同webpack.config.dev.js找到module里的css配置部分，修改正则匹配为：/\.(css|scss)$...
2024-01-10
webpack 与 vue 打包体积优化
在使用vue开发时，遇到打包后单个文件太大，因而需要分包，不然加载时间太久。虽然尽可能减少请求次数，但是单个包太大也不是好事思路组件按需加载vue-router 的懒加载第三方包分离代码分割时，组件按需加载现在ui库大多都是以组件的形式进行处理，因而不用将整个库都导入，只需导入...
2024-01-10
详解webpack es6 to es5支持配置
1. 安装webpacknpm install webpack --save-dev2. 安装babel 实现 ES6 到 ES5npm install --save-dev babel-core babel-preset-es20153.安装 babel-loader npm install --save-dev babel-loaderwebpack.config.js完整配置module.exports = { entry: './src/js/app.js', output: { pat...
2024-01-10
基于webpack的react脚手架
一、前言：react的cli开发模式太过于简单，好多东西都要自己配置二、这里有个简单的配置，可以直接上手开发(不熟悉webpack和npm的绕路)，已经完成的配置如下1：默认ejs模板2：编译less、scss3：热更新4：抽离压缩CSS、js5：打包后chunkhash模式的版本号6：提取公用第三方JS库7：图片base64处理8：本机IP...
2024-01-10
vue+webpack实现异步组件加载
8.9更新：之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来，所以跑去博客园了，今天发现csdn已经帮我把文章搬过来，有必要修正一下这篇文章。写这篇文章的时候因为刚接触vue，所以捣鼓的时候有些迷糊。...
2024-01-10
手动搭建 webpack + react 框架
手动搭建 webpack + react 框架准备创建空项目文件夹。建议安装cnpm，下文所有npm可以用cnpm代替npm install -g cnpm --registry=https://registry.npm.taobao.org初始化 npm 环境npm init 一路回车即可依赖安装 npm i webpack -D npm i webpack-cli -D (因为webpak 到 4版本以上 就需要这个 ，不然会报错)创建目录及配置文件创...
2024-01-10
【Vue】webpack引入iview运行出错
使用webpack新建Vue项目，Vue正常引入可以运行，但是当我引入iview并试图打包的时候，报了一大堆错误。。看了一下，都是css出错了：webpack配置如下：/*公共配置文件*/const path = require('path')const webpack = require('webpack')const HtmlWebpackPlugin = require('html-webpack-plugin')const VueLoaderPlugin = require('vue-loader/...
2024-01-10
vue 项目配置webpack代理服务，不生效
我用的是vue2.5,webpack版本是3.6，我如下配置了dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // Various Dev Server settings host: '192.168.31.91', // can be overwritten by ...
2024-02-18
react+reudx+webpack结合开发流程简述
先为大家介绍下redux。redux是flux的具体实现，可以把redux理解为一个管理数据的框架。而整个redux管理的数据都存在一个名为state的数组当中（可以是一个n维数组，具体维数看具体项目复杂程度），redux为了管理这个state数组封装了一系列的方法，因此，state数组+state数组的管理方法 = redux。以...
2024-01-10
vue-webpack模板升级到webpack4
本文仅简单记录下基于vue-webpack模板升级到webpack4的过程快速部署 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli# 全局安装 vue-cli$ npm install --global @vue/cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project 升级 升级的操作很简单，先删除，再安装即可(淘宝镜像)。但要注意webpack4版本中 w...
2024-01-10
【Vue】vue-cli webpack css中的图片路径问题
我使用vue-cli中的webpak模板，在.vue文件中我在css中引用图片template中引用一张style的css中引用一张目录结构如图app.vuehello.vue当我npm run build后 多了个dist,如果我进入dist目录anywhere启动服务器 那么地址是 http://192.168.10.13:8000/#/ 此时 两张图片正常css:.hello[data-v-2e7268e9] {width: 200px;height: 200px;background: ur...
2024-01-10webpack编译react需要注意的细节
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。react安装 当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。 # npm install react react-dom –savereact安装就这样...
2024-01-10
Vue--webpack打包css、image资源
前戏Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。这样，我们就可以通过 require 或 impor...
2024-01-10
【React】webpack require 路径 可以用变量吗？
问题：webpack require 路径 可以用变量吗？需求：由于需要动态的请求一些 JS脚本，路径是 一个变量，在 react+webpack 开发中，有办法 有 require 去加载一个 动态路径的 脚本？var popWinPath = '../../js/window.js';var Win = require(popWinPath)console.log('Win', Win, popWinPath)已经找到解决的办法// 文件变量var popWinPath = 'js/...
2024-01-10如何修改vue-cli3预设的terser-webpack-plugin？
现有一个基于vue-cli3和webpack4的vue2项目，我使用vue-cli-service inspect命令导出webpack配置后，minimizer部分如代码所示：minimizer: [ { options: { test: /\.m?js(\?.*)?$/i, chunkFilter: () => true, ...
2024-03-12
【Vue】vue-cli3查看webpack默认配置
前言从vue-cli3.0 版本开始，取消了 build 和 config 文件夹，webpack相关的配置被隐藏了起来。要对 webpack 做个性化配置，需要在根目录创建vue.config.js 文件进行配置覆盖。但是我们怎么知道 vue-cli 内置了什么样的配置呢？vue-cli 官方提供了 inspect 命令 ——查看 webpack 配置的方法：vue inspectvue-cli-service 暴...
2024-01-10
Vue2 + webpack + express4构建单页应用(一)
想要构建一个vue2的单页应用，发现vue-cli生成的项目虽然可以直接用，但是生成的项目是用的vue1，而且直接使用也不能完全掌握和了解项目用了哪些插件和打包工具，为了自己更好的了解和学习开发vue2需要用到的打包工具和相关插件，自己看了许多博客，总结了以下一个构建基本vue2单页项目的流程，...
2024-01-10vue+webpack模拟后台数据的示例代码
一、在webpack-dev-conf.js文件中：1、在const portfinder = require(‘portfinder')后添加如下内容const express = require('express')const app = express() //请求servervar appData = require('../mock/goods.json') //加载本地数据文件var apiRoutes = express.Router()app.use(apiRoutes) //通过路由请求数...
2024-01-10
